<template>
  <div class="w-100 h-100 contain">
    <div class="w-50 h-100 contain_item">
      <div v-for="(item, index) in data.slice(0, 2)" class="contain_item1">
        <div class="d-flex">
          <div
            style="font-family: '优设标题黑'; text-shadow: 0px 0px 3px #fc9803"
          >
            {{ item }}
          </div>
          <div style="color: #92a0a7;font-family: '优设标题黑'; ">{{  list[index].unit }}</div>
        </div>

        <div style="color: #fff">{{  list[index].label }}</div>
      </div>
    </div>
    <div class="w-50 h-100 contain_item">
      <div v-for="(item, index) in data.slice(2, 4)" class="contain_item2">
      

        <div style="color: #fff">{{ list[index+2].label }}</div>
        <div class="d-flex">
          <div
            style="font-family: '优设标题黑'; text-shadow: 0px 0px 3px #fc9803"
          >
            {{ item }}
          </div>
          <div style="color: #92a0a7;font-family: '优设标题黑'">{{  list[index+2].unit }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const list = ref([
  {
    label: "泵站",
    value: "10",
    unit: "个",
  },
  {
    label: "排水管网",
    value: "124",
    unit: "m",
  },
  {
    label: "涵闸",
    value: "10",
    unit: "处",
  },
  {
    label: "堤防",
    value: "11.02",
    unit: "公里",
  },
]);
const props = defineProps({
  selectValue: {
    type: Number,
    default: 2024,
  },
  echartsData: {
    type: Array,
    default: () => [],
  },
});
const data:any = ref([]);

const current = computed(() => {
  
  let data:any = [];
  try {
    data = props.echartsData[props.selectValue];
  } catch (error) {}

  return data;
});

watch(
  () => current.value,
  (val) => {
    console.log(val,'valval1');
    
    if (val) {
   data.value=val
    }
  }
);
onMounted(() => {
data.value=props.echartsData[props.selectValue]

});
</script>

<style lang="less" scoped>
.contain {
  background: url("@/assets/image/underGround/pai_back.png") no-repeat center
    center;
  align-content: center;
  display: flex;
  &_item {
    width: 100%;
    height: 20%;
    padding: 30px;
    font-size: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center
  }
  &_item1 {
    width: 100%;
    height: 25%;
    display: flex;
    padding: 20px 100px 20px 0;
    justify-content: space-between;
  }
  &_item2 {
    width: 100%;
    height: 25%;
    display: flex;
    padding: 20px 0 20px  100px;
    justify-content: space-between;
  }
}
.contain_item1:last-child {
  margin-top: 20px;
}
.contain_item2:last-child {
  margin-top: 20px;
}
</style>
